<template>
  <div>
    <el-card>
      <el-radio-group v-model="radio">
        <el-radio-button label="1">理论模考</el-radio-button>
        <el-radio-button label="2">技能模考</el-radio-button>
      </el-radio-group>
      <div class="content" v-if="radio == '1'">
        <div class="left">
          <div style="margin: 50px 0">
            <el-progress
              type="dashboard"
              :percentage="percentage"
              :stroke-width="15"
              show-text
            >
              <template #default="{ percentage }">
                <div class="percentage-value">{{ percentage }}%</div>
                <div class="percentage-label">正确率</div>
              </template>
            </el-progress>
          </div>
          <div class="numQuestion">
            <div class="question-numbers">
              <div
                v-for="n in 20"
                :key="n"
                class="number-item"
                :class="{ active: currentQuestion === n }"
                @click="selectQuestion(n)"
              >
                {{ n }}
              </div>
            </div>
            <div class="question-buttons">
              <el-button type="primary" class="question-btn"
                >重新作答
              </el-button>
              <el-button class="question-btn">错题解析</el-button>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="question-container">
            <!-- 单选题示例 -->
            <div class="question-item">
              <div class="question-title">
                第1题（单选题）：Vue.js 是什么类型的框架？
              </div>
              <el-radio-group
                v-model="singleSelection"
                class="question-options"
              >
                <el-radio label="A">后端框架</el-radio>
                <el-radio label="B">前端框架</el-radio>
                <el-radio label="C">全栈框架</el-radio>
                <el-radio label="D">移动端框架</el-radio>
              </el-radio-group>
              <el-button
                type="primary"
                @click="toggleAnalysis(1)"
                class="analysis-btn"
              >
                解析
                <el-icon>
                  <ArrowUp v-if="showAnalysis[1]" />
                  <ArrowDown v-else />
                </el-icon>
              </el-button>
              <div class="question-analysis" v-show="showAnalysis[1]">
                <div class="analysis-content">
                  Vue.js
                  是一套用于构建用户界面的渐进式JavaScript框架，主要用于前端开发。<br />
                  正确答案：B
                </div>
              </div>
            </div>

            <!-- 多选题示例 -->
            <div class="question-item">
              <div class="question-title">
                第2题（多选题）：以下哪些是 Vue.js 的特性？
              </div>
              <el-checkbox-group
                v-model="multipleSelection"
                class="question-options"
              >
                <el-checkbox label="A">响应式数据绑定</el-checkbox>
                <el-checkbox label="B">组件化开发</el-checkbox>
                <el-checkbox label="C">虚拟DOM</el-checkbox>
                <el-checkbox label="D">服务端渲染</el-checkbox>
              </el-checkbox-group>
              <el-button @click="toggleAnalysis(2)" class="analysis-btn">
                解析
                <el-icon>
                  <ArrowUp v-if="showAnalysis[2]" />
                  <ArrowDown v-else />
                </el-icon>
              </el-button>
              <div class="question-analysis" v-show="showAnalysis[2]">
                <div class="analysis-content">
                  Vue.js
                  具有响应式数据绑定、组件化开发、虚拟DOM和支持服务端渲染等多种特性。<br />
                  正确答案：A、B、C、D
                </div>
              </div>
            </div>

            <!-- 简答题示例 -->
            <div class="question-item">
              <div class="question-title">
                第3题（简答题）：请简述 Vue.js 的生命周期钩子有哪些？
              </div>
              <el-input
                v-model="shortAnswer"
                type="textarea"
                :rows="4"
                placeholder="请输入答案"
                class="answer-textarea"
              ></el-input>
              <el-button @click="toggleAnalysis(3)" class="analysis-btn">
                解析
                <el-icon>
                  <ArrowUp v-if="showAnalysis[3]" />
                  <ArrowDown v-else />
                </el-icon>
              </el-button>
              <div class="question-analysis" v-show="showAnalysis[3]">
                <div class="analysis-content">
                  Vue.js 的生命周期钩子包括：<br />
                  1. beforeCreate<br />
                  2. created<br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="course-content" v-else>
        <div class="course-title">轨道交通智能数据处理与感知实训</div>
        <div class="box">
          <div class="course">
            <div
              v-for="n in 20"
              :key="n"
              class="course-item"
              :class="{ active: currentCourse == n }"
              @click="selectCourse(n)"
            >
              轨道交通智能数据处理与感知实训课题 {{ n }}
            </div>
          </div>
          <div class="space">
            <div class="course-detail" v-if="currentCourse">
              <el-button type="primary">开始学习</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from "vue";
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
const state = reactive({
  radio: "1",
  percentage: 60,
  // 当前选中的题目编号
  currentQuestion: 1,
  //单选题答案
  singleSelection: "",
  // 多选题答案
  multipleSelection: [],
  // 简答题答案
  shortAnswer: "",
  // 控制每道题解析的显示状态
  showAnalysis: {
    1: false,
    2: false,
    3: false,
  },
  currentCourse: 1,
});
let {
  radio,
  percentage,
  currentQuestion,
  singleSelection,
  multipleSelection,
  shortAnswer,
  showAnalysis,
  currentCourse,
} = toRefs(state);

// 选择题目的方法
function selectQuestion(num) {
  state.currentQuestion = num;
}
// 切换解析显示状态
function toggleAnalysis(num) {
  state.showAnalysis[num] = !state.showAnalysis[num];
}
//
function selectCourse(n) {
  state.currentCourse = n;
}
</script>

<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  width: 180px;
}
.content {
  margin-top: 20px;
  display: flex;
  flex: 1;
  min-height: calc(100vh - 267px);
  .left {
    width: 277px;
    padding-right: 20px;
    border-right: 2px solid #ebeef5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .right {
    flex: 1;
    padding: 20px;
  }
}
.numQuestion {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  .question-numbers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: min-content;
    gap: 20px 10px;
    overflow-y: auto;
    padding: 10px;
    height: 67%;
  }

  .number-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    border: 1px solid #dcdfe6;
    margin: 0 auto;

    &:hover {
      background-color: #ecf5ff;
      border-color: #409eff;
    }

    &.active {
      background-color: #409eff;
      color: white;
      border-color: #409eff;
    }
  }
  // 左侧按钮
  .question-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px;
    :deep(.el-button + .el-button) {
      margin-left: 0;
    }
    .question-btn {
      width: 100%;
    }
  }
}

// 右侧
.question-container {
  height: calc(100vh - 308px);
  overflow-y: auto;
}

.question-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  background-color: #fafafa;
  :deep(.el-radio-group) {
    align-items: flex-start !important;
  }
}
.question-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  text-align: left;
}

.answer-textarea {
  margin-bottom: 10px;
}

.analysis-btn {
  margin-bottom: 10px;
}

.question-analysis {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.analysis-content {
  color: #606266;
  line-height: 1.6;
}
.course-content {
  margin-top: 20px;
  .course-title {
    font-weight: bold;
  }
  .box {
    margin-top: 10px;
    height: calc(100vh - 339px);
    background-color: #f8fbff;
    display: flex;
    padding: 20px 10px;
    .course {
      flex: 0 0 333px;
      overflow-y: auto;
      .course-item {
        // 超出宽度点点点
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 15px 20px;
        cursor: pointer;
        transition: all 0.3s;
        &.active {
          color: #409eff;
        }
      }
    }
    .space {
      flex: 1;
      border-radius: 10px;
      border: 1px solid white;
    }
  }
}
</style>
